<template>
  <div class="fourth">
    <ul class="top">
      <li><span>{{info[0].emailNumber}}</span>
        <p>{{info[0].customerTypeName}}</p></li>
      <img src="../../../public/img/icon/go.png" alt="">
      <li><span>{{info[1].emailNumber}}</span>
        <p>{{info[1].customerTypeName}}</p></li>
      <img src="../../../public/img/icon/go.png" alt="">
      <li><span>{{info[2].emailNumber}}</span>
        <p>{{info[2].customerTypeName}}</p></li>
      <img src="../../../public/img/icon/go.png" alt="">
      <li><span>{{info[3].emailNumber}}</span>
        <p>{{info[3].customerTypeName}}</p></li>
      <img src="../../../public/img/icon/go.png" alt="">
      <li><span>{{info[4].emailNumber}}</span>
        <p>{{info[4].customerTypeName}}</p></li>
    </ul>
    <div class="content">
      <ul>
        <li v-for="item,index in info[0].emailInfoVOList" :key="index" @click="toDetail(item)">
          <el-tooltip placement="right-end" class="more">
            <div slot="content">发送了邮件<br/><b style="display: block;width: 200px" v-html="item.emailSubject"
                                             class="more"></b></div>
            <div>
              {{item.linkman}} <br>往来邮件 <br> <span>{{item.sendTime}}</span>
            </div>
          </el-tooltip>
        </li>
        <li class="empty-list" v-show="info[0].emailInfoVOList.length==0">无客户动态</li>
      </ul>
      <ul style="text-align: center">
        <li v-for="item,index in info[1].emailInfoVOList" :key="index" @click="toDetail(item)">
          <el-tooltip placement="right-end" class="more">
            <div slot="content">发送了邮件<br/><b style="display: block;width: 200px" v-html="item.emailSubject"></b></div>
            <div>
              {{item.linkman}} <br>往来邮件 <br> <span>{{item.sendTime}}</span>
            </div>
          </el-tooltip>
        </li>
        <li class="empty-list" v-show="info[1].emailInfoVOList.length==0">无客户动态</li>
      </ul>
      <ul style="text-align: center">
        <li v-for="item,index in info[2].emailInfoVOList" :key="index" @click="toDetail(item)">
          <el-tooltip placement="right-end" class="more">
            <div slot="content">发送了邮件<br/><b style="display: block;width: 200px" v-html="item.emailSubject"></b></div>
            <div>
              {{item.linkman}} <br>往来邮件 <br> <span>{{item.sendTime}}</span>
            </div>
          </el-tooltip>
        </li>
        <li class="empty-list" v-show="info[2].emailInfoVOList.length==0">无客户动态</li>
      </ul>
      <ul style="text-align: center">
        <li v-for="item,index in info[3].emailInfoVOList" :key="index" @click="toDetail(item)">
          <el-tooltip placement="right-end">
            <div slot="content">发送了邮件<br/><b style="display: block;width: 200px" v-html="item.emailSubject"
                                             class="more"></b></div>
            <div>
              {{item.linkman}} <br>往来邮件 <br> <span>{{item.sendTime}}</span>
            </div>
          </el-tooltip>
        </li>
        <li class="empty-list" v-show="info[3].emailInfoVOList.length==0">无客户动态</li>
      </ul>
      <ul style="text-align: right">
        <li v-for="item,index in info[4].emailInfoVOList" :key="index" @click="toDetail(item)">
          <el-tooltip placement="right-end">
            <div slot="content">发送了邮件<br/><b style="display: block;width: 200px" v-html="item.emailSubject"
                                             class="more"></b></div>
            <div>
              {{item.linkman}} <br>往来邮件 <br> <span>{{item.sendTime}}</span>
            </div>
          </el-tooltip>
        </li>
        <li class="empty-list" v-show="info[4].emailInfoVOList.length==0">无客户动态</li>
      </ul>
    </div>
  </div>
</template>

<script>
    import {getRollBackEmail} from '@/api/home'
    import {getDiffList} from '@/util/util'

    export default {
        name: "Fourth",
        data() {
            return {
                info: [
                    {emailNumber: 0, emailInfoVOList: []},
                    {emailNumber: 0, emailInfoVOList: []},
                    {emailNumber: 0, emailInfoVOList: []},
                    {emailNumber: 0, emailInfoVOList: []},
                    {emailNumber: 0, emailInfoVOList: []}
                ]
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                getRollBackEmail().then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                    }
                })
            },
            toDetail(row) {
                sessionStorage.setItem("lastpath", "/mail/index")
                const ID = row.temailInfoId + "a";//row.id - 临时
                if (getDiffList(ID, 'emailListTab') == -1) {
                    this.$store.commit('SET_EMAILLISTTAB', {
                        type: 1, row: {
                            id: ID,
                            title: row.emailSubject,
                            state: 1,
                            close: true
                        }
                    })
                } else {
                    this.$store.commit('SET_EMAILLISTTAB', {type: 0, current: ID})
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .fourth {
    margin: 0 0 20px 0;
    border-radius: 10px;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      background: linear-gradient(90deg, rgba(54, 117, 212, 1) 0%, rgba(78, 134, 217, 1) 78%);
      border-radius: 10px;
      padding: 15px 0 !important;

      li {
        width: 100px;
        text-align: center;

        span {
          display: inline-block;
          width: 55px;
          line-height: 55px;
          background: #6393e1;
          border-radius: 50%;
          color: #fff;
          margin-bottom: 5px;
        }

        p {
          font-size: 15px;
          color: #fff;
        }
      }

      img {
        width: 134px;
        height: 25px;
        margin-top: -23px;
      }

      .space-line {
        width: 200px;
        height: 5px;
        margin-top: 0;
        background: linear-gradient(-90deg, rgba(134, 149, 240, 1) 0%, rgba(139, 196, 246, 0) 100%);
        border-radius: 3px;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;

      ul {
        width: 17%;
        max-height: 366px;
        overflow-y: auto;

        li {
          padding: 8px 15px 0 15px;
          height: 70px;
          background: rgba(255, 255, 255, 1);
          border-radius: 15px;
          margin: 10px 0;
          font-size: 14px;
          color: #435B77;
          text-align: left;
          cursor: pointer;

          span {
            font-size: 12px;
            color: #666;
          }
        }

        .empty-list {
          border: 2px dotted rgba(75, 132, 216, 1);
          background-color: #f0f2f5;
          line-height: 61px;
          text-align: center;
          color: #435B77;

        }
      }
    }
  }
</style>
